@extends('admin.layouts.master')

@section('pagecss')
<link rel="stylesheet" type="text/css" href="/admin/assets/bootstrap-daterangepicker/daterangepicker.css" />
@endsection

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">查询条件</header>
			<div class="aw-mt20 overflow-hidden">
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">订单编号：</div>
					<div class="col-xs-8 aw-p0"><input type="text" id="order_id" name="order_id" v-model="form.order_id" :value="form.order_id" placeholder="请输入订单编号" class="form-control"></div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">店面：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择店面" id="store_id" name="store_id" v-model="form.store_id" :value="form.store_id" class="form-control">
							<option value="0">全部</option>
							<option v-for="(list,key) in list_store" :value="list.id">@{{list.store_name}}</option>
						</select>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">订单状态：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择订单状态" id="status" name="status" v-model="form.status" :value="form.status" class="form-control">
							<option value="0">全部</option>
							<option value="1">已定场</option>
							<option value="2">已匹配</option>
							<option value="3">待评价</option>
						</select>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">时间范围：</div>
					<div class="col-xs-8 aw-p0">
						<input type="text" placeholder="请选择时间范围" id="order_time" name="order_time" v-model="form.order_time" :value="form.order_time" class="form-control">
						<input type="text" placeholder="起始时间" v-model="form.order_start_time" :value="form.order_start_time" class="aw-hide">
						<input type="text" placeholder="结束时间" v-model="form.order_end_time" :value="form.order_end_time" class="aw-hide">
					</div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<a class="btn btn-green" v-on:click="List_Search()"><i class="icon-search"></i> 搜索</a>
					<a href="/admin/order/list?page_id=3" class="btn btn-gray"><i class="icon-refresh"></i> 重置</a>
				</div>
			</div>
			<header class="panel-heading aw-mt20">订单列表</header>
			<table class="table table-striped dataTable table-hover">
				<thead>
					<tr>
						<th>订单编号</th>
						<th>主队</th>
						<th>客队</th>
						<th>比赛时段</th>
						<th>店面</th>
						<th>场地</th>
						<th>预定时间</th>
						<th>支付状态</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(list, key) in lists" :data-key="key" :data-id="list.id">
						<td>@{{list.order_id}}</td>
						<td>@{{list.main_team}}</td>
						<td>@{{list.slave_team_name}}</td>
						<td>@{{list.time}}</td>
						<td>@{{list.address.storefront_name}}</td>
						<td>@{{list.address.type_text}} @{{list.address.number}}号</td>
						<td>@{{list.dateline}}</td>
						<td>@{{list.pay_type_text}}</td>
						<td>@{{list.status_text}}</td>
						<td>
							<a class="btn btn-blue btn-xs" :href="'/admin/order/info?page_id=3&id='+list.order_id">
								<i class="icon-file-text-alt"></i> 订单详情
							</a>
							<button v-if="list.pay_type==2&&(list.status==1 || list.status==6)" class="btn btn-gules btn-xs" v-on:click="List_Del(list.order_id,list.main_team,list.slave_team_name,list.time)">
								<i class="icon-signout"></i> 取消预定
							</button>
							<button v-if="list.order_type==3&&list.status==2" class="btn btn-gules btn-xs" v-on:click="List_Del(list.order_id,list.main_team,list.slave_team_name,list.time)">
								<i class="icon-signout"></i> 取消预定
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="aw-text-center aw-list-null" v-if="lists.length==0">暂无数据</div>
			<vue-page :page_item="page_item" :page_this="page_this" :page_all="page_all" :Call_back="Call_back"></vue-page>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<!--日期插件-->
<script type="text/javascript" src="/admin/assets/bootstrap-daterangepicker/date.js"></script>
<script type="text/javascript" src="/admin/assets/bootstrap-daterangepicker/daterangepicker.js"></script>

<script type="text/javascript" src="/admin/js/vue-page.js"></script>
<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var Get_form={
	page_id:'3',order_id:'',store_id:0,status:0,order_start_time:'',order_end_time:'',order_time:''
}
$.extend(Get_form,MJS_URLArry);
var AD_list={
	api:'/adminapi/order/list',
	form_data:Get_form,
	tips:false,
}
var AD_list_store={
	api:'/adminapi/storefront/list',
	form_data:{page_num:100},
	tips:false,
}
var Ajax_Vue_Fun=function(vue_data){
	console.log('vue_data')
	console.log(vue_data)
	var Data_Vue=ajax_data_res(vue_data)
	Data_Vue.form=Get_form;
	Data_Vue.list_store={};
	vm=new Vue({
		el:'#Vue-Body',
		data:Data_Vue,
		components:{
			'vue-page':Vpage
		},methods:{
			Call_back:function(page){
				Vm_Call_back_Page(page)
			},List_Del:function(id,team_1,team_2,time){
				var tips='取消 ['+team_1+'] 与 ['+team_2+'] '+time+' 的比赛'
				var AD_del={
					api:'/adminapi/order/cancel',
					form_data:{id:id},
					tips:tips+'成功',
					msg:'是否'+tips+'？',
				}
				Vm_List_Status(AD_del)
			},List_Search:function(){
				Vm_List_SearchText('订单',this.form)
			}
		},watch:{
	        'form.store_id':function(val,oldval){
	            console.log('门店改变')
	            console.log(val,oldval)
	            this.List_Search()
	        },'form.status':function(val,oldval){
	            console.log('订单状态改变')
	            console.log(val,oldval)
	            this.List_Search()
	        }
	    }
	})
	console.log(vm)
	$('#order_time').daterangepicker({
		format: 'yyyy-MM-dd',
		startDate: Date.today(),
        endDate: Date.today().add({ days: +5 }),
        showDropdowns:true ,
        autoApply:true,
        opens:'right',
		locale:{
			applyLabel: '确定',
			fromLabel: '开始',
			toLabel: '结束',
 			customRangeLabel: 'Custom Range',
			daysOfWeek: ['日', '一', '二', '三', '四', '五','六'],
			monthNames: ['一月', '二月', '三月',  '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月','十二月',],
			firstDay: 1
        },
	},function(start, end) {
		vm.form.order_time=start.toString('yyyy-MM-dd')+' - '+end.toString('yyyy-MM-dd');
		vm.form.order_start_time=start.toString('yyyy-MM-dd');
		vm.form.order_end_time=end.toString('yyyy-MM-dd');
    	console.log(vm)
    })
	$('#order_time').click(function(){
		$('.dropdown-menu').css({'z-index':'999999999999999'})
		if(!vm.form.order_){
			vm.form.order_time=DateToday()+' - '+DateToday(5);
			vm.form.order_start_time=DateToday();
			vm.form.order_end_time=DateToday(5);
		}
	})
    URL_Make(vm.form)
	getData(AD_list_store,Ajax_Vue_Fun_Store)
}
var Ajax_Vue_Fun_Store=function(vue_data_store){
	vm.list_store=vue_data_store.list;
}
getData(AD_list,Ajax_Vue_Fun)
</script>
@endsection

@endsection

